<template>
    <el-date-picker
      class="flat-input"
      v-model="innerValue"
      size="small"
      type="daterange"
      unlink-panels
      range-separator="~"
      :shortcuts="shortcuts"
      :clearable="clearable"
      :editable="false"
      value-format="YYYY-MM-DD"
      format="YYYY-MM-DD"
      :prefix-icon="Calendar"
      :style="{ width: styleWidth, height: styleHeight }"
      @change="onChange"
      :start-placeholder="placeholder"
      :end-placeholder="placeholder"
    />
  </template>
  
  <script setup>
  import { computed } from "vue";
  import { Calendar } from "@element-plus/icons-vue";
  
  const props = defineProps({
    modelValue: { type: Array, default: null }, // ['2025-10-01','2025-10-14']
    clearable: { type: Boolean, default: true },
    styleWidth: { type: String, default: "200px" },
    styleHeight: { type: String, default: "28px" },
    placeholder: { type: String, default: "维护日期范围选择" },
    shortcuts: {
      type: Array,
      default: () => [
        {
          text: "本月",
          value: () => {
            const now = new Date();
            const s = new Date(now.getFullYear(), now.getMonth(), 1);
            const e = new Date(now.getFullYear(), now.getMonth() + 1, 0);
            return [s, e];
          },
        },
        {
          text: "近7天",
          value: () => [
            new Date(Date.now() - 6 * 86400000),
            new Date(),
          ],
        },
      ],
    },
  });
  
  const emits = defineEmits(["update:modelValue", "change", "normalized"]);
  
  const innerValue = computed({
    get: () => props.modelValue,
    set: (val) => {
      emits("update:modelValue", val);
      emits("change", val);
    },
  });
  
  function onChange(val) {
    if (!val || val.length !== 2) {
      emits("normalized", null);
      return;
    }
    const [d1, d2] = val;
    const normalized = [
      d1 + " 00:00:00",
      d2 + " 23:59:59",
    ];
    emits("normalized", normalized);
  }
  </script>
  
  <style scoped>
  /* ✅ 去除 hover 与 focus 的高亮、加粗、阴影 */
  :deep(.el-range-editor.el-input__wrapper),
  :deep(.el-input__wrapper) {
    border: 1px solid #dcdfe6 !important;
    box-shadow: none !important;
    transition: none !important; /* 取消边框动画 */
  }
  
  /* 鼠标悬停时仍保持原始样式 */
  :deep(.el-range-editor.el-input__wrapper:hover),
  :deep(.el-input__wrapper:hover),
  :deep(.el-range-editor.is-active),
  :deep(.el-input__wrapper.is-focus) {
    border: 1px solid #dcdfe6 !important; /* 不变粗 */
    box-shadow: none !important;
    transition: none !important;
  }
  
  /* ✅ 让左右输入框文字居中 */
  :deep(.el-range-input) {
    text-align: center;
    pointer-events: none;
    color: var(--el-text-color-regular);
  }
  
  /* 分隔符 "~" 的样式 */
  :deep(.el-range-separator) {
    margin: 0 4px;
    color: var(--el-text-color-placeholder);
  }
  
  /* 让整体外观像单输入框 */
  :deep(.el-range-editor.el-input__wrapper) {
    padding: 0 10px;
    height: 28px;
    border-radius: 6px;
    background: #fff;
  }

  /* 方案A：优先用 CSS 变量把 hover/focus 的颜色和阴影关掉 */
  .flat-input {
    /* 锁死边框颜色，不要变蓝 */
    --el-input-hover-border-color: #dcdfe6 !important;
    --el-input-focus-border-color: #dcdfe6 !important;
  }

  /* 方案B：再用强选择器兜底，去掉 box-shadow 和任何加粗的视觉 */
  .flat-input :deep(.el-input__wrapper),
  .flat-input :deep(.el-range-editor.el-input__wrapper) {
    border: 1px solid #dcdfe6 !important;
    box-shadow: none !important;
    transition: none !important; /* 也去掉动画 */
  }

  /* 悬停时 */
  .flat-input :deep(.el-input__wrapper:hover),
  .flat-input :deep(.el-range-editor.el-input__wrapper:hover) {
    border: 1px solid #dcdfe6 !important;
    box-shadow: none !important;
    transition: none !important;
  }

  /* 聚焦/激活时（range 会加 is-active / input 会加 is-focus） */
  .flat-input :deep(.el-input__wrapper.is-focus),
  .flat-input :deep(.el-range-editor.el-input__wrapper.is-active) {
    border: 1px solid #dcdfe6 !important;
    box-shadow: none !important;
    transition: none !important;
  }

  </style>
  
  